<template>
  <div
    class="cockpit_desc scroll_container"
    :style="{ width: cockpitWidth + 'px' }"
  >
    <div class="title">领导驾驶舱</div>
    <div class="cockpit_box">
      <div class="cockpit_nav d_a_c">
        <div class="line_h"></div>
        <div class="nav_box d_a_c">
          <div
            v-for="item in cockpitNav"
            :class="[
              item.value == cockpiId ? 'nav_select' : 'nav_item',
              'pointer',
            ]"
            :key="item.value"
            @click="changeNav(item.value)"
          >
            {{ item.label }}
            <img
              class="nav_select_img"
              v-if="item.value == cockpiId"
              src="@/assets/img/rencaipeixuntit.png"
              alt=""
            />
          </div>
        </div>
        <div class="line_h"></div>
      </div>
      <div v-if="cockpiId == 0">
        <div class="cn_title pointer">
          <img src="@/assets/img/l_title.png" alt="" />
          产业分析图
          <span></span>
        </div>
        <div class="cockpit_chart" id="cockpitChart1"></div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="productName" width="100" label="产品名称">
          </el-table-column>
          <el-table-column
            prop="productRate"
            align="center"
            width="100"
            label="产业全国占比"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="saleCount"
            label="销售业绩（万元）"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="rank"
            label="全国排名"
            width="80"
          >
          </el-table-column>
        </el-table>
      </div>
      <div v-else-if="cockpiId == 1">
        <div class="cock_2_title">
          <span>培训人才总数据</span>
          <div class="cock_2_bg"></div>
        </div>
        <div class="personnel_box">
          <div
            class="personnel_item d_c"
            v-for="(item, index) in personnelCount"
            :key="index"
          >
            <span class="font_1">{{ item }}</span>
          </div>
          <div class="personnel_item d_c">
            <span class="font_1" style="font-size: 24px">人</span>
          </div>
        </div>
        <div v-for="(item, index) in infoList" :key="index" class="info_line">
          <img :src="item.img" alt="" />
          <div class="info_t">{{ item.title }}</div>
          <div class="info_c font_1">{{ item.count }}</div>
        </div>
      </div>
      <div v-else-if="cockpiId == 2">
        <div class="cockpit_chart_2" id="cockpitChart2"></div>
        <div class="cockpid_head">
          <div v-for="(item, index) in cockpidHeads" :key="index">
            <div class="head_img">
              <img :src="item.img" alt="" />
            </div>
            <div class="head_t">{{ item.title }}</div>
          </div>
        </div>
        <div
          class="cockpid_table"
          v-for="(item, index) in cockpidTable"
          :key="index"
        >
          <div class="desc">
            <i :class="['iconfont', item.icon]"></i>
            <span class="blue">{{ item.name }}</span>
          </div>
          <div class="online">{{ item.online }}</div>
          <div class="offline">{{ item.offline }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cockpiId: 0,
      cockpitNav: [
        {
          label: "产业数据",
          value: 0,
        },
        {
          label: "人才培训",
          value: 1,
        },
        {
          label: "物联网",
          value: 2,
        },
      ],
      tableData: [
        {
          saleCount: "5250.00",
          productName: "粮食产业",
          productRate: "12%",
          rank: 137,
        },
        {
          saleCount: "452.00",
          productName: "蔬菜产业",
          productRate: "23%",
          rank: 201,
        },
        {
          saleCount: "358.00",
          productName: "食用菌产业",
          productRate: "31%",
          rank: 189,
        },
        {
          saleCount: "100.00",
          productName: "水果产业",
          productRate: "35%",
          rank: 121,
        },
        {
          saleCount: "5250.00",
          productName: "畜牧产业",
          productRate: "15%",
          rank: 327,
        },
        {
          saleCount: "5250.00",
          productName: "药茶产业",
          productRate: "25%",
          rank: 327,
        },
        {
          saleCount: "5250.00",
          productName: "水产产业",
          productRate: "18%",
          rank: 217,
        },
      ],
      personnelCount: "582",
      infoList: [
        {
          img: "/img/wanghongdaren.png",
          title: "网红达人(人)",
          count: 91,
        },
        {
          img: "/img/dianshangxuanpin.png",
          title: "电商选品人员(人)",
          count: 36,
        },
        {
          img: "/img/dianshangyunying.png",
          title: "电商运营人员(人)",
          count: 132,
        },
        {
          img: "/img/zhihuizhongzhi.png",
          title: "智慧种植、人员养殖(人)",
          count: 295,
        },
        {
          img: "/img/shangyedaitouren.png",
          title: "商业带头人(人)",
          count: 28,
        },
      ],
      cockpitWidth: 455,
      cockpidHeads: [
        {
          title: "设备",
          img: "/img/shebeiguanli.png",
        },
        {
          title: "在线数",
          img: "/img/zaixian.png",
        },
        {
          title: "离线数",
          img: "/img/lixian.png",
        },
      ],
      cockpidTable: [
        {
          icon: "icon-jiankong",
          name: "监控",
          online: 97,
          offline: 97,
        },
        {
          icon: "icon-turangjiance",
          name: "土壤监测仪",
          online: 7,
          offline: 7,
        },
        {
          icon: "icon-huangjingwenshidu",
          name: "温湿度监测",
          online: 97,
          offline: 97,
        },
        {
          icon: "icon-qixiangzhan",
          name: "气象站",
          online: 97,
          offline: 97,
        },
        {
          icon: "icon-guangzhaojiance",
          name: "光照值检测",
          online: 97,
          offline: 97,
        },
        {
          icon: "icon-turangPH",
          name: "PH检测",
          online: 97,
          offline: 97,
        },
      ],
      chart1: null,
      chart2: null,
    };
  },
  watch: {
    cockpiId: {
      immediate: true,
      handler(newVal) {
        if (newVal == 0) {
          this.cockpitWidth = 455;
          if (this.chart2 != null) {
            this.chart2.dispose();
          }
          this.$nextTick(() => {
            this.renderCockpitChart1();
          });
        } else if (newVal == 1) {
          this.cockpitWidth = 370;
          if (this.chart1 != null) {
            this.chart1.dispose();
          }
          if (this.chart2 != null) {
            this.chart2.dispose();
          }
        } else if (newVal == 2) {
          this.cockpitWidth = 370;
          if (this.chart1 != null) {
            this.chart1.dispose();
          }
          this.$nextTick(() => {
            this.renderCockpitChart2();
          });
        }
      },
    },
  },
  mounted() {},
  methods: {
    changeNav(value) {
      this.cockpiId = value;
    },
    renderCockpitChart1() {
      this.chart1 = this.$echarts.init(
        document.getElementById("cockpitChart1")
      );
      var colorList = [
        "#06CCFF",
        "#0E79F0",
        "#E6B363",
        "#01E09A",
        "#E2F2F6",
        "#aff",
        "rgba(250,250,250,0.5)",
      ];

      const datas = [
        {
          name: "粮食产业",
          value: 200,
        },
        {
          name: "蔬菜产业",
          value: 80,
        },
        {
          name: "食用菌产业",
          value: 40,
        },
        {
          name: "水果产业",
          value: 48,
        },
        {
          name: "畜牧产业",
          value: 14,
        },
      ];
      let sum = 0;
      for (var i of datas) {
        sum += i.value;
      }
      const title = {
        name: "产业全国占比",
        value: sum,
      };
      const rich = {
        name: {
          color: "#7FAAE9",
          fontSize: 14,
          align: "left",
          padding: [0, 10, 20, 0],
        },
        value: {
          color: "#fff",
          fontSize: 20,
          align: "left",
        },
        title: {
          color: "#7FAAE9",
          fontSize: 12,
        },
        titleUnit: {
          color: "#7FAAE9",
          fontSize: 14,
          padding: [15, 0, 0, 0],
        },
        titleValue: {
          color: "#fff",
          fontSize: 18,
          fontWeight: 600,
          padding: [15, 5, 5, 5],
        },
      };
      let option = {
        grid: {
          bottom: 0,
          left: 0,
          right: "0%",
        },
        legend: {
          show: true,
          orient: "vertical",
          type: "scroll",
          icon: "circle",
          top: "0",
          right: "0",
          itemGap: 7,
          itemWidth: 7,
          itemHeight: 7,
          textStyle: {
            color: "#f2f2f2",
            rich: {
              name: {
                fontSize: 14,
                padding: [0, 20, 0, 0],
                color: "#AED0EF",
              },
              value: {
                fontSize: 14,
                color: "#fff",
                padding: [0, 0, 0, 0],
              },
              a: {
                fontSize: 12,
                color: colorList[0],
                padding: [0, 0, 0, 0],
              },
              b: {
                fontSize: 12,
                color: colorList[1],
                padding: [0, 0, 0, 0],
              },
              c: {
                fontSize: 12,
                color: colorList[2],
                padding: [0, 0, 0, 0],
              },
              d: {
                fontSize: 12,
                color: colorList[3],
                padding: [0, 0, 0, 0],
              },
              e: {
                fontSize: 12,
                color: colorList[4],
                padding: [0, 0, 0, 0],
              },
            },
          },
          formatter: function (name) {
            let str = "";
            let res = datas.filter((v) => v.name === name);
            if (res.length == 1) {
              str = "{name|" + name + " }{value|" + res[0].value + "}";
              let rate = ((res[0].value / sum) * 100).toFixed(2) + "%";
              switch (name) {
                case "粮食产业":
                  str = "{name|" + name + " }{a|" + rate + "}";
                  break;
                case "蔬菜产业":
                  str = "{name|" + name + " }{b|" + rate + "}";
                  break;
                case "食用菌产业":
                  str = "{name|" + name + " }{c|" + rate + "}";
                  break;
                case "水果产业":
                  str = "{name|" + name + " }{d|" + rate + "}";
                  break;
                case "畜牧产业":
                  str = "{name|" + name + " }{e|" + rate + "}";
                  break;
              }
              return str;
            }
            return str;
          },
        },
        series: [
          // 主要展示层的
          {
            radius: ["75%", "90%"],
            center: ["20%", "50%"],
            type: "pie",
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
                length: 35,
                length2: 100,
                lineStyle: {
                  color: "#d3d3d3",
                },
                align: "right",
              },
              color: "#000",
              emphasis: {
                show: true,
              },
            },
            data: datas,
          },
          {
            type: "pie",
            radius: ["75%", "90%"],
            center: ["20%", "45%"],
            data: datas,
            itemStyle: {
              normal: {
                color: function (params) {
                  color: "rgba(250,250,250,0.5)";
                },
              },
            },
            label: {
              show: true,
              position: "center",
              formatter: () =>
                `{titleValue|${title.value}}\n{title|${title.name}}`,
              rich,
            },
          },
        ],
      };
      this.chart1.setOption(option, { notMerge: true });
    },
    renderCockpitChart2() {
      this.chart2 = this.$echarts.init(
        document.getElementById("cockpitChart2")
      );
      let img = "/img/chart_w.png";
      let img2 = "/img/chart_n.png";
      let sourceData = [
        {
          name: "气象站数量",
          value: 27,
        },
        {
          name: "光照值检测",
          value: 12,
        },
        {
          name: "PH检测",
          value: 13,
        },
        {
          name: "温湿度监测",
          value: 15,
        },
        {
          name: "土壤监测仪",
          value: 17,
        },
        {
          name: "监控数量",
          value: 30,
        },
      ];
      let data = [];
      let color = [
        "#00FF7E",
        "#E6FB38",
        "#F65904",
        "#0AF9FB",
        "#FBBF38",
        "#009BFF",
      ];
      for (let i = 0; i < sourceData.length; i++) {
        data.push({
          value: sourceData[i].value,
          name: sourceData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              borderColor: color[i],
            },
          },
        });
      }
      let seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [43, 40],
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#AED0EF",
                fontSize: 10,
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < sourceData.length; i++) {
                    total += sourceData[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      params.name +
                      "\n" +
                      "\n" +
                      params.value +
                      "台" +
                      "  " +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 40,
                length2: 15,
                show: true,
                lineStyle: {
                  color: "#99b7d6",
                  type: "dotted",
                },
              },
            },
          },
          data: data,
        },
      ];
      let option = {
        color: color,
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 105,
                height: 105,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
            {
              type: "image",
              z: 3,
              style: {
                image: img2,
                width: 65,
                height: 65,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      this.chart2.setOption(option, { notMerge: true });
    },
  },
};
</script>
<style lang="scss">
.cockpit_desc {
  .el-table thead {
    border: 1px solid #009bff;
    background: rgba(1, 108, 195, 0.36);
  }
  .el-table {
    background-color: unset !important;
  }

  .el-table th {
    background-color: unset !important;
    color: #aed0ef !important;
    border-bottom: none !important;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td :hover {
    background-color: none !important;
  }

  .el-table th.is-leaf {
    border-bottom: none !important;
  }
  .el-table td {
    border-bottom: 1px dashed #495a80 !important;
  }

  .el-table tbody tr:hover > td {
    background-color: unset !important;
  }

  .el-table::before {
    content: "";
    position: absolute;
    background-color: unset !important;
    z-index: 1;
  }
  .el-table .el-table__header-wrapper th {
    font-size: 12px !important;
  }
  .el-table .el-table__header-wrapper th {
    height: 22px !important;
    background: #0d3973;
    padding: 0;
    color: #54b7fd !important;
  }
  .el-table tr {
    background-color: unset !important;
    color: #a0d6fc !important;
  }
}
</style>
<style lang="scss" scoped>
.cockpit_desc {
  width: 455px;
  height: 505px;
  background: rgba(14, 25, 105, 0.7);
  position: absolute;
  top: 23px;
  left: 30px;
  z-index: 11;

  .cockpit_box {
    width: 100%;
    padding: 20px 18px;
    .cockpid_table {
      width: 100%;
      height: 24px;
      background: rgba(1, 108, 195, 0.18);
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 12px;
      margin-top: 6px;

      .desc {
        width: 33%;
        text-align: left;
      }
      .iconfont {
        font-size: 20px;
        margin-right: 10px;
        color: #fff;
      }
      .online {
        color: #00ff7e;
        width: 33%;
        text-align: center;
      }
      .offline {
        color: #b8ddfe;
        width: 33%;
        text-align: center;
      }
    }
    .cockpid_head {
      display: flex;
      justify-content: space-around;
      .head_t {
        color: #aed0ef;
        font-size: 12px;
      }
      .head_img {
        width: 32px;
        height: 36px;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }

    .cockpit_chart_2 {
      width: 100%;
      height: 180px;
    }
    .personnel_box {
      display: flex;
      width: 100%;
      margin: 15px 0;

      .personnel_item {
        width: 30px;
        height: 36px;
        background: linear-gradient(0deg, #45dbfb 0%, #ffffff 100%);
        border-radius: 3px;
        margin-right: 10px;
        span {
          font-size: 30px;
          font-weight: bold;
          color: #0e1644;
        }
      }
    }
    .info_line {
      width: 100%;
      height: 44px;
      position: relative;
      margin-bottom: 16px;
      .info_t {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 70px;
        color: #ffffff;
        letter-spacing: 2.4px;
        font-size: 12px;
      }
      .info_c {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        background: linear-gradient(0deg, #dbeffc 0%, #4bddfb 100%);
        display: inline-block;
        color: transparent;
        -webkit-background-clip: text;
        font-size: 26px;
        font-weight: bold;
        letter-spacing: 2.6px;
      }
      img {
        height: 100%;
        width: 100%;
      }
    }

    .cock_2_title {
      position: relative;
      font-size: 14px;
      text-align: left;
      color: #ffffff;
      letter-spacing: 2.8px;
      margin-top: 15px;
      span {
        margin-left: 10px;
      }
      .cock_2_bg {
        width: 140px;
        height: 8px;
        transform: skew(-40deg);
        background-image: linear-gradient(
          rgba(242, 184, 64, 0.1),
          rgba(251, 191, 56, 0.95)
        );
        position: absolute;
        bottom: -2px;
        left: 0px;
      }
    }
    .cn_title {
      color: #adcff1;
      font-size: 12px;
      text-align: left;
      margin: 20px 0 10px 0;
      img {
        width: 15px;
        height: auto;
        margin-right: 10px;
      }
      span {
        display: inline-block;
        width: 290px;
        border-top: 1px dashed #aed0ef;
        margin: 0 20px;
        transform: translateY(-5px);
        margin: 0 5px 0 20px;
      }
    }
    .cockpit_nav {
      height: 28px;
      .nav_box {
        width: 96%;
        height: 100%;
        background: rgba(1, 108, 195, 0.2);
        margin: 0 5px;
        justify-content: space-between;
        font-size: 14px;
        .nav_select {
          width: 107px;
          height: 15px;
          color: #fff;
          background-size: cover;
          position: relative;
          .nav_select_img {
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 107px;
            height: 15px;
          }
        }
        .nav_item {
          color: #0993fd;
          width: 107px;
          height: 15px;
        }
      }
      .line_h {
        width: 4px;
        height: 100%;
        background: #016dc3;
      }
    }
    .cockpit_chart {
      height: 110px;
      width: 100%;
      margin-bottom: 10px;
    }
  }

  .title {
    width: 100%;
    height: 28px;
    background-image: url("@/assets/img/tangkuang_t.png");
    background-size: 100% 100%;
    color: #fbbf38;
    line-height: 28px;
    text-align: left;
    padding-left: 30px;
    font-size: 14px;
    font-weight: 700;
  }
}
</style>